<template>
  <ul class="base-table">
    <li class="th">
      <div
        class="td"
        v-for="(c, cIndex) in columns"
        :key="cIndex"
        :style="[tdStyle(c)]"
      >
        {{ c.title }}
      </div>
    </li>

    <li
      class="tr"
      v-for="(d, dIndex) in datas"
      :key="dIndex"
      @click="$emit('tr-click', d)"
    >
      <div
        class="td"
        v-for="(v, k, vIndex) in filterItem(d)"
        :key="k"
        :style="[tdStyle(v)]"
        @click.stop="$emit('td-click', { d, v, i: vIndex })"
      >
        {{ v.value }}
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },

    datas: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {};
  },

  created() {},

  methods: {
    filterItem(d) {
      const r = {};

      this.columns.map((c) => {
        if (c.key in d) {
          r[c.key] = {};
          r[c.key]["value"] = d[c.key];
          r[c.key]["style"] = c.style;
        }
      });

      return r;
    },

    tdStyle(v) {
      return {
        width: `${100 / this.columns.length}%`,
        ...v.style,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.base-table {
  .th {
    display: flex;
    background-color: #b0cce5;
  }

  .tr {
    display: flex;
    border-bottom: 2rpx solid var(--color-border);

    .td {
      padding: 20rpx 10rpx;
      font-size: 24rpx;
    }
  }

  .td {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
  }
}
</style>
